import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/account_settings_controller.dart';

import '../common/routes.dart';
import '../service/auth_service.dart';

class AccountSettingsPage extends GetView<AccountSettingsController> {
  const AccountSettingsPage({super.key});

  _buildListViewItem(String title, String content, VoidCallback onTap) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        onTap();
      },
      child: Column(
        children: [
          SizedBox(
            height: 50,
            child: Row(
              children: [
                SizedBox(
                  width: 10,
                ),
                Text(title, style: const TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.bold)),
                const Spacer(),
                Text(content, style: const TextStyle(fontSize: 13, color: Colors.black54)),
                const Icon(Icons.chevron_right, color: Colors.black26, size: 20),
              ],
            ),
          ),
          Divider(
            height: 1,
            color: Colors.grey[100],
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final authService = Get.find<AuthService>();
    return Scaffold(
      backgroundColor: Color.fromARGB(250, 255, 255, 255),
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text("账号设置"),
      ),
      body: GetBuilder<AccountSettingsController>(
        builder: (_) {
          return Column(
            children: [
              Container(
                margin: EdgeInsets.symmetric(vertical: 30),
                child: GestureDetector(
                  onTap: () async {
                    await controller.chooseImage();
                  },
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(36),
                    child: controller.avatarFilePath.isNotEmpty
                        ? Image.file(
                            File(controller.avatarFilePath),
                            width: 72,
                            height: 72,
                            fit: BoxFit.cover,
                          )
                        : CachedNetworkImage(
                            height: 72,
                            width: 72,
                            fadeInDuration: const Duration(seconds: 0),
                            fadeOutDuration: const Duration(seconds: 0),
                            fit: BoxFit.cover,
                            imageUrl: authService.userModel?.avatar ?? "",
                            errorWidget: (_, url, object) {
                              return Container(color: Colors.grey[200]);
                            },
                          ),
                  ),
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Colors.white,
                ),
                margin: EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                child: ListView(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  children: <Widget>[
                    _buildListViewItem("用户名", "～～", () {
                      Get.toNamed(Routes.EDIT_NICKNAME);
                    }),
                    _buildListViewItem("手机号", "无绑定", () {}),
                    _buildListViewItem("微信账号", "无绑定", () {}),
                    _buildListViewItem("QQ账号", "无绑定", () {}),
                    if (GetPlatform.isIOS) _buildListViewItem("Apple账号", "无绑定", () {}),
                    _buildListViewItem("抖音账号", "无绑定", () {}),
                  ],
                ),
              ),
              Spacer(),
              Container(
                width: double.infinity,
                margin: EdgeInsets.only(left: 10, right: 10, bottom: 20),
                child: FilledButton(
                  onPressed: () {},
                  style: FilledButton.styleFrom(
                    backgroundColor: Colors.red,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                  child: Text("注销账号"),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}
